<template>
  <div class="pad-content-box">
    <el-form ref="form" label-width="100px" class="margin-top-bottom-20">
      <el-row class="row">
        <el-col :span="8">
          <el-form-item label="分区名">
            <el-select v-model="searchParams.partitionKey" clearable>
              <el-option v-for="item in areaList" :key="item.primaryKey" :label="item.partitionName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产编码">
            <el-input v-model="searchParams.assetCode" placeholder="请输入" clearable @keyup.enter.native="getList('')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼层">
            <el-input v-model="searchParams.buildingStorey" placeholder="请输入" type="number" clearable @keyup.enter.native="getList('')"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-button size="small" type="primary" @click="getList('')" class="f-right margin-left-10">查询</el-button>
          <el-button size="small" type="primary" @click="addArea" class="f-right" v-if="isPageEdit">新建分区</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-collapse v-model="activeNames">
      <template v-if="areaList.length > 0">
        <el-collapse-item :name="item.primaryKey" v-for="(item, index) in areaList" :key="item.primaryKey">
          <!-- 折叠的分区头部 -->
          <template slot="title">
            <div class="flex justify-between align-centers" style="width: 100%">
              <div>
                <span class="font-size-16">{{ item.partitionName }}</span>
                <span class="font-size-14 padding-left-20 color-999999">共有{{ item.floors.length }}楼层</span>
              </div>
              <div class="margin-right-10" v-if="isPageEdit">
                <el-button size="mini" type="info" icon="el-icon-edit" @click.stop="editArea(item)"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="deleteArea(item)"></el-button>
                <el-button size="mini" type="primary" @click.stop="addFloor(item)">新增楼层</el-button>
              </div>
            </div>
          </template>
          <div class="split-box flex-center-all bg-color-f2f3f5 font-size-14">{{ item.partitionDesc }}</div>
          <!-- 楼层 -->
          <div class="margin-bottom-15" :class="buildingIndex < item.floors.length - 1 ? 'building-box' : ''" v-for="(building, buildingIndex) in item.floors" :key="building.floorKey">
            <el-form :ref="`buildingform${buildingIndex}`" :model="building" label-width="130px" :disabled="!isPageEdit">
              <el-row class="row">
                <el-col :span="8">
                  <el-form-item label="楼层名称" prop="floorName" :rules="[{ required: true, message: '请输入楼层名称', trigger: 'blur' }]">
                    <el-input maxlength="200" v-model="building.floorName" placeholder="请输入" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="height: 40px">
                  <el-form-item label="所在建筑层数" prop="buildingStorey" :rules="[{ required: true, message: '请输入所在建筑层数', trigger: 'blur' }]">
                    <el-input v-model="building.buildingStorey" type="number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="楼层编码" prop="floorCoding">
                    <el-input maxlength="200" readonly v-model="building.floorCoding" placeholder="自动生成"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本层使用面积" prop="useArea" :rules="[{ required: true, message: '请输入本层使用面积', trigger: 'blur' }]">
                    <el-input type="number" maxlength="200" v-model="building.useArea" placeholder="请输入">
                      <template slot="append">
                        <span style="color: #333">㎡</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本层分摊面积" prop="shareArea" :rules="[{ required: true, message: '请输入本层分摊面积', trigger: 'blur' }]">
                    <el-input type="number" maxlength="200" v-model="building.shareArea" placeholder="请输入">
                      <template slot="append">
                        <span style="color: #333">㎡</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本层建筑面积" prop="buildingArea" :rules="[{ required: true, message: '请输入本层建筑面积', trigger: 'blur' }]">
                    <el-input type="number" maxlength="200" v-model="building.buildingArea" placeholder="请输入">
                      <template slot="append">
                        <span style="color: #333">㎡</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本层层高" prop="theLevel" :rules="[{ required: true, message: '请输入本层层高', trigger: 'blur' }]">
                    <el-input type="number" maxlength="200" v-model="building.theLevel" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本层使用系数" prop="useFactory" :rules="[{ required: true, message: '请输入本层使用系数', trigger: 'blur' }]">
                    <el-input type="number" maxlength="200" v-model="building.useFactory" placeholder="请输入">
                      <template slot="append">
                        <span style="color: #333">%</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本层CAD面积" prop="cadArea" :rules="[{ required: true, message: '请输入本层CAD面积', trigger: 'blur' }]">
                    <el-input type="number" maxlength="200" v-model="building.cadArea" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="规划用途" prop="planUse" :rules="[{ required: true, message: '请选择规划用途', trigger: 'blur' }]">
                    <el-select v-model="building.planUse" clearable>
                      <el-option v-for="item in purposeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="保修期">
                    <el-date-picker v-model="building.warrantyTime" type="date" value-format="timestamp" clearable placeholder="请选择"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" v-if="isPageEdit">
                    <el-button class="f-right margin-top-5" size="mini" type="danger" plain @click.stop="deleteFloor(building, item.floors, buildingIndex)">删除</el-button>
                    <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="saveFloor(building, buildingIndex, item.primaryKey)">保存</el-button>
                  </el-form-item>
                </el-col>
                <div class="border-bottom-dashed-F2F2F2 cut-off-line f-left margin-bottom-10"></div>
              </el-row>
            </el-form>
            <!-- 图纸资产 -->
            <el-collapse-item v-if="building.primaryKey" :name="`drawing${index}${buildingIndex}`">
              <template slot="title">
                <el-form ref="pinForm" label-width="130px" class="drawing-foem-box">
                  <el-row class="row">
                    <el-col :span="8">
                      <el-form-item label="楼层图">
                        <el-select :disabled="building.isEdit ? true : false" v-model="building.version" placeholder="历史版本切换" @change="changeVersion(building)">
                          <el-option v-for="item in building.floorPlanList" :key="item.version" :label="item.version" :value="item.version" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item label="">
                        <el-tooltip class="item" effect="dark" placement="top-start" style="margin-left: -115px">
                          <div slot="content">
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-blue"></i>商铺</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-yellow"></i>活动空间</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-red"></i>消防通道</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-green"></i>楼道</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-orange"></i>办公室</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-balck"></i>仓库</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-sgrea"></i>会议室</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-purple"></i>写字楼</div>
                            <div class="align-center font-size-12"><i class="icon el-icon-location font-size-20 bg-lightBlue"></i>其他</div>
                          </div>
                          <i class="el-icon-warning"></i>
                        </el-tooltip>
                        <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="approveSubmit" v-if="building.isEdit && (model.projectStatus == 1 || !model.projectStatus)">提交</el-button>

                        <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="approveFn" v-if="building.isEdit && model.projectStatus == 2">提审</el-button>

                        <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="addSpace(building, 'merge')" v-if="building.isEdit">合铺</el-button>

                        <uploadFile class="f-right margin-right-10 margin-top-1" :floor-key="building.floorKey" filed-name="file" :max-size="100" :limit="100" accept-file-type=".png,.jpg,.Png,.Jpg," @handleSuccess="handleSuccess($event, building.floorKey, building.version)" btn-name="更新图纸" v-if="building.isEdit"> </uploadFile>
                        <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="addSpace(building, 'add')" v-if="building.isEdit">新增空间</el-button>
                        <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="draftFn(building)" v-if="!building.isEdit && isPageEdit">编辑</el-button>
                        <el-button class="f-right margin-right-10 margin-top-5" size="mini" type="primary" plain @click.stop="draftFn(building)" v-if="building.isEdit">取消编辑</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </template>
              <template v-if="building.attachment">
                <div class="drawing-box flex">
                  <div class="left-box" v-if="building.attachment">
                    <img :src="building.attachment.url" class="cmd-pic" />
                  </div>
                  <el-tooltip placement="right" v-for="assets in building.spaceList" :key="assets.priamryKey">
                    <div slot="content" v-if="assets.shopAndActivityInfo">
                      <div class="padding-right-10 margin-top-5">{{ assets.name || '暂无名称' }}</div>
                      <div class="padding-right-10">
                        <el-button type="text" class="s-size" @click="assetInfo(assets.shopAndActivityInfo, building, assets.operateAction)">详情</el-button>
                        <el-button v-if="building.isEdit" type="text" class="color-red s-size" @click="assetDelete(assets.shopAndActivityInfo)">删除</el-button>
                      </div>
                    </div>
                    <div v-if="assets.shopAndActivityInfo" @mousedown="moveAssets($event, assets, building.spaceList, building.isEdit)" class="flex margin-bottom-10 cursor-pointer drag-box" :style="[{ left: assets.positionX + 'px' }, { top: assets.positionY + 'px' }]">
                      <i class="icon el-icon-location font-size-25" :class="setBgCalssName(assets.shopAndActivityInfo.spaceType, assets.operateAction)"></i>
                      <div class="padding-right-10 margin-top-5">{{ assets.name || '暂无名称' }}</div>
                    </div>
                  </el-tooltip>
                  <!-- <div v-for="assets in building.spaceList" @mousedown="moveAssets($event, assets, building.spaceList)" :key="assets.priamryKey" class="flex margin-bottom-10 cursor-pointer drag-box" :style="[{ left: assets.positionX + 'px' }, { top: assets.positionY + 'px' }]">
                <i class="icon el-icon-location font-size-25" :class="setBgCalssName(assets.spaceType)"></i>
                <div class="margin-top-5">{{ assets.shopNumber }}</div>
              </div> -->
                  <div class="right-box padding-10 flex-1"></div>
                </div>
              </template>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-collapse-item>
          </div>
        </el-collapse-item>
      </template>
      <el-empty v-else description="暂无数据"></el-empty>
    </el-collapse>

    <!-- 新增分区 -->
    <zc-area ref="areaDialog" :dialog-show="dialogObj.areaDialog" :formModel="dialogObj.areaModel" @hideDialog="hideAllDialog" @getList="getList"></zc-area>
    <!-- 空间信息 | 商铺信息 | 合铺 -->
    <zc-space ref="spaceDialog" :dialog-show="dialogObj.spaceDialog" :spaceList="spaceList" :formModel="dialogObj.spaceModel" @hideDialog="hideAllDialog" @reloadAssetsData="reloadAssetsData" :is-merge="dialogObj.isMerge" :work-id="workId" @separateShop="separateShop" :is-edit="dialogObj.isSpaceEdit" :shop-list="dialogObj.shopList"></zc-space>
    <!-- 提审 -->
    <!-- <zc-approve ref="approveDialog" :dialog-show="dialogObj.approDialog" @hideDialog="hideAllDialog" @reloadData="hideAllDialog" :work-id="workId" :project-info="model"></zc-approve> -->
    <!-- 拆铺 -->
    <zc-shopSeparate ref="separateDialog" :dialog-show="dialogObj.shopSeparateDialog" :formModel="dialogObj.shopSeparateModel" @hideDialog="hideAllDialog" @getList="reloadAssetsData" :work-id="workId"></zc-shopSeparate>
  </div>
</template>
<script>
  import { requestTips, askDialog } from '../../../assets/util';
  import * as Build from '../../../api/building';
  import { dictList } from '../../../api/common';
  import uploadFile from '../modules/upload.vue';
  import zcArea from '../modules/dialog/zcArea.vue';
  import zcShopSeparate from '../modules/dialog/zcShopSeparate.vue';
  import zcSpace from '../modules/dialog/zcSpace.vue';
  import zcApprove from '../modules/dialog/zcApprove.vue';
  import projectInfoApi from '../../../api/projectInfo';

  export default {
    props: {},
    data() {
      return {
        areaList: [],
        searchParams: { partitionKey: '', assetCode: '', buildingStorey: '' },
        floorModel: { floorName: '', buildingStorey: '', floorCoding: '', useFactory: '', shareArea: '', buildingArea: '', theLevel: '', useFactory: '', cadArea: '', planUse: '', warrantyTime: '' },
        activeNames: [],
        purposeList: [], //规划用途
        spaceList: [], //空间类型
        dialogObj: {
          //分区
          areaDialog: false,
          areaModel: {
            partitionName: '',
            partitionDesc: '',
          },
          //空间信息 | 商铺信息
          spaceDialog: false,
          isSpaceEdit: false,
          spaceModel: {
            code: '',
            name: '',
            spaceType: '',
            shopCode: '',
            shopNumber: '',
            cadArea: '',
            buildingArea: '',
            planUse: '',
            effectiveDate: '',
            expirationDate: '',
            shopTag: '',
            status: '',
          },
          //拆铺
          shopSeparateDialog: false,
          shopSeparateModel: {},
          isMerge: false, //是否是合铺的标识
          //提审
          approDialog: false,
          //合铺
          shopList: [], //合铺时当前楼层下可合并的商铺
        },
        workId: '',
        maxDragLeft: 1070, //拖拽最大left偏移量
        // maxDragLeft: document.documentElement.clientWidth - 60 - 50, //拖拽最大left偏移量
        model: {},
      };
    },
    computed: {
      isPageEdit() {
        return !this.$route.query.taskId;
      },
    },
    mounted() {
      this.getProjectInfo();
      this.getList();
      this.getPurposeList();
      this.getSpaceList();
    },

    methods: {
      async getProjectInfo() {
        let res = await projectInfoApi.apiProjectInfo({
          spaceKey: this.$route.query.spaceKey,
        });
        // res.projectStatus = 2
        this.model = res;
      },
      //规划用途字典
      async getPurposeList() {
        let res = await dictList({
          dictType: 'planning_type',
        });
        this.purposeList = res.rows || [];
      },
      //空间类型字典
      async getSpaceList() {
        let res = await dictList({
          dictType: 'space_type',
        });
        this.spaceList = res.rows || [];
      },
      //数据源
      async getList() {
        this.searchParams.buildingStorey = parseInt(this.searchParams.buildingStorey);
        let res = await Build.apiBuildingInfo({
          spaceKey: this.$route.query.spaceKey,
          ...this.searchParams,
        });
        res.rows.forEach(item => {
          this.activeNames.push(item.primaryKey);
          item.floors.forEach(floor => {
            floor.isEdit = false;
            this.setShopAndActivityInfo(floor.spaceList)
          });
        });
        this.areaList = res.rows || [];
        this.hideAllDialog();
      },
      //楼道消防通道没有shopAndActivityInfo手动添加
      setShopAndActivityInfo(list){
        list.forEach(space => {
          if (!space.shopAndActivityInfo) {
            space.shopAndActivityInfo = {
              spaceType: String(space.targetType),
              code: space.code,
              name: space.name,
              primaryKey: space.primaryKey,
              floorKey: space.floorKey,
              pointKey: space.primaryKey,
              positionY: space.positionY,
              positionX: space.positionX
            };
          }
        });
      },
      //更新全页面数据
      reloadData() {
        this.hideAllDialog();
      },
      //更新楼层资产空间
      async reloadAssetsData(floorKey) {
        this.hideAllDialog();
        let res = await Build.apiBuildingDraft({
          workId: this.workId,
        });

        res.spaceList.forEach(item => {
          let shopAndActivityInfo = {
            spaceType: String(item.targetType),
            code: item.code,
            name: item.name,
            primaryKey: item.primaryKey,
            floorKey: floorKey,
          };
          //楼道  消防通道 需要手动set一下
          item.shopAndActivityInfo = item.shopAndActivityInfo ? item.shopAndActivityInfo : shopAndActivityInfo;
          item.shopAndActivityInfo.positionX = item.positionX;
          item.shopAndActivityInfo.positionY = item.positionY;
          item.shopAndActivityInfo.pointKey = item.primaryKey;
        });

        this.initPropertyPosition(res.spaceList);

        this.updateSpaceData(res, floorKey);
      },
      // ----------------------------------------------------- 分区 -----------------------------------------------------
      //新建分区
      addArea() {
        this.dialogObj.areaModel = {
          partitionName: '',
          partitionDesc: '',
        };
        this.dialogObj.areaDialog = true;
      },
      //编辑分区
      editArea(item) {
        this.dialogObj.areaModel = item;
        this.dialogObj.areaDialog = true;
      },
      //删除分区
      async deleteArea(item) {
        askDialog('确认删除？', async () => {
          let res = await Build.apiAreaDelete({ primaryKey: item.primaryKey });
          requestTips(res, () => {
            this.getList();
          });
        });
      },
      // ----------------------------------------------------- 楼层-----------------------------------------------------
      //新增楼层
      addFloor(item) {
        let param = JSON.parse(JSON.stringify(this.floorModel));
        item.floors.unshift(param);
      },
      //保存楼层
      async saveFloor(item, index, areaKey) {
        let formName = 'buildingform' + index;
        this.$refs[formName][0].validate(async valid => {
          if (valid) {
            let param = JSON.parse(JSON.stringify(item));
            param.spaceKey = this.$route.query.spaceKey;
            param.partitionKey = areaKey;
            let res = item.primaryKey ? await Build.apiFloorUpdate(param) : await Build.apiFloorAdd(param);
            requestTips(res, () => {
              this.getList();
            });
          }
        });
      },
      //删除楼层
      deleteFloor(data, floorList, index) {
        if (data.floorPlanList && data.floorPlanList.length > 0) {
          this.$message.warning('楼层下有过审版本');
          return;
        }
        askDialog('是否删除该楼层？', async () => {
          if (data.primaryKey) {
            const res = await Build.apiFloorDelete({ primaryKey: data.primaryKey });
            requestTips(res, () => {
              this.getList();
            });
          } else {
            floorList.splice(index, 1);
          }
        });
      },
      // ----------------------------------------------------- 空间资产-----------------------------------------------------
      //新增空间 | 合铺
      addSpace(floor, type) {
        if (!floor.attachment || !floor.attachment.url) {
          this.$message.warning('请先上传图纸');
          return;
        }
        this.dialogObj.isSpaceEdit = floor.isEdit;

        for (let i in this.dialogObj.spaceModel) {
          this.dialogObj.spaceModel[i] = '';
        }
        if (type == 'merge') {
          //合铺
          this.dialogObj.shopList = [];
          this.dialogObj.spaceDialog = true;
          this.dialogObj.isMerge = true;
          floor.spaceList.forEach(item => {
            if (item.shopAndActivityInfo.spaceType == '1' && item.operateAction != 2) {
              this.dialogObj.shopList.push(item.shopAndActivityInfo);
            }
          });
        } else {
          this.dialogObj.spaceDialog = true;
          this.dialogObj.isMerge = false;
        }
        let notMoveList = []; //没移动过的空间
        floor.spaceList.forEach(item => {
          if (item.positionX == 1100) {
            notMoveList.push(item);
          }
        });
        this.$refs.spaceDialog.setFloorData(floor.floorKey, notMoveList, floor.version);
      },
      //空间详情 operateAction==2说明是禁用状态
      assetInfo(data, floor, operateAction) {
        this.$refs.spaceDialog.floorIsEdit = floor.isEdit;
        this.dialogObj.isMerge = false;
        this.dialogObj.spaceModel = JSON.parse(JSON.stringify(data));
        this.dialogObj.isSpaceEdit = operateAction == 2 ? false : floor.isEdit;
        this.dialogObj.spaceDialog = true;
        let notMoveList = [];
        floor.spaceList.forEach(item => {
          if (item.positionX == 1100) {
            notMoveList.push(item);
          }
        });
        this.$refs.spaceDialog.setFloorData(floor.floorKey, notMoveList);
      },
      //空间删除
      assetDelete(data) {
        let apiName = '';
        if (data.spaceType == '5' || data.spaceType == '6') {
          apiName = 'apiSpaceDelete';
        } else if (data.spaceType == '1' || data.spaceType == '3' || data.spaceType == '4' || data.spaceType == '7' || data.spaceType == '8' || data.spaceType == '9') {
          apiName = 'apiShopDelete';
        } else if (data.spaceType == '2') {
          apiName = 'apiActivitySpaceDelete';
        }
        askDialog('确认删除？', async () => {
          let res = await Build[apiName]({ primaryKey: data.primaryKey });
          requestTips(res, () => {
            this.reloadAssetsData(data.floorKey);
          });
        });
      },
      //空间进入编辑状态
      async draftFn(floor) {
        //编辑状态
        if (!floor.isEdit) {
          let res = await Build.getWorkId({ spaceKey: this.$route.query.spaceKey, workType: 1, floorKey: floor.floorKey });
          //1-待审核//2-审核中//3-通过//4-不通过
          if (res.procStatus == 2) {
            this.$message.warning('审批中，无草稿数据');
            return;
          }
          this.workId = res.workId;
          floor.isEdit = !floor.isEdit;
          this.reloadAssetsData(floor.floorKey);
        } else {
          //取消编辑
          floor.isEdit = !floor.isEdit;
          if (floor.floorPlanList && floor.floorPlanList.length > 0) {
            this.changeVersion(floor);
          } else {
            floor.attachment = '';
          }
        }
      },
      //拆铺
      separateShop(notMoveList, version) {
        this.dialogObj.spaceDialog = false;
        this.dialogObj.shopSeparateModel = this.dialogObj.spaceModel;
        this.dialogObj.shopSeparateDialog = true;

        this.$refs.separateDialog.setFloorData(notMoveList);
        this.$nextTick(() => {
          this.$refs.separateDialog.addList = [];
          this.$refs.separateDialog.version = version;
        });
      },
      //切换版本
      async changeVersion(floorData) {
        if (!floorData.version) return;
        let res = await Build.apiGetInfoByVersion({ version: floorData.version, floorKey: floorData.floorKey });
        this.setShopAndActivityInfo(res.spaceList)
        this.updateSpaceData(res, floorData.floorKey);
        floorData.isEdit = false;
      },
      //更新单个楼层图纸和资产信息
      updateSpaceData(res, floorKey) {
        this.areaList.forEach(area => {
          area.floors.forEach(floor => {
            if (floor.floorKey == floorKey) {
              floor.spaceList = res.spaceList;
              floor.attachment = res.attachment;
              // floor.version = res.version;
            }
          });
        });
      },
      approveSubmit() {
        askDialog('确认提交？', async () => {
          let data = {
            workType: 1,
            spaceKey: this.$route.query.spaceKey,
            workId: this.workId,
          };
          const res = await projectInfoApi.summitAuditAndSuccess(data);
          requestTips(res, () => {
            this.getProjectInfo();
            this.getList();
            // this.hideAllDialog();
          });
        });
      },
      //提审
      async approveFn() {
        // this.dialogObj.approDialog = true;
        // this.$refs.approveDialog.getInfo();
        let pathUrl = {
          name: 'arraignment-zcApprove',
          query: {
            ...this.$route.query,
            workId: this.workId,
          },
        };
        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },
      //拖拽
      moveAssets(e, data, list, isEdit) {
        let odiv = e.target; //获取目标元素
        let parOutBox = odiv.parentNode.parentNode; //爷爷
        let parBox = odiv.parentNode; //父亲

        let positionLeft = Number(parBox.style.left.split('px')[0]); //当前元素的定位left值
        let positionTop = Number(parBox.style.top.split('px')[0]); //当前元素的定位top值

        let grandpaBoxTop = parOutBox.getBoundingClientRect().top; //爷爷盒子距离窗口的top值
        let grandpaBoxHeight = parOutBox.getBoundingClientRect().height; //爷爷盒子的高度
        let disX = e.clientX - positionLeft; //鼠标相对于元素的x偏移量
        let disY = e.clientY - grandpaBoxTop - positionTop; //鼠标相对于元素的y偏移量

        let maxDragTop = grandpaBoxHeight - 30; //拖拽最大top偏移量

        document.onmousemove = e => {
          //编辑状态 && 不是禁用状态 下才能修改
          if (isEdit && data.operateAction != 2) {
            let left = e.clientX - disX; //横坐标为鼠标的位置减去之前的（鼠标相对于元素的x偏移量）
            let top = e.clientY - grandpaBoxTop - disY;
            //确定可移动的区域范围
            if (left < this.maxDragLeft && left > 0) {
              data.positionX = left;
              if (top < maxDragTop && top > 0) {
                data.positionY = top;
              }
            }
          }
        };
        document.onmouseup = e => {
          if (isEdit && data.operateAction != 2) {
            let left = e.clientX - disX;
            let top = e.clientY - grandpaBoxTop - disY;
            if (left < this.maxDragLeft && left > 0) {
              if (top < maxDragTop && top > 0) {
                data.shopAndActivityInfo.positionX = left;
                data.shopAndActivityInfo.positionY = top;
                this.setPosition(data);
                this.initPropertyPosition(list);
              }
            }
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
      //初始化未曾移动过的资产的位置,整齐排列
      initPropertyPosition(list) {
        let notMovelist = [];
        list.forEach(item => {
          if (item.positionX == 1100) {
            notMovelist.push(item);
          }
        });
        notMovelist.forEach((item, index) => {
          item.positionX = 1100;
          if (index == 0) {
            item.positionY = 10;
            item.shopAndActivityInfo.positionY = 10;
          } else {
            item.positionY = notMovelist[index - 1].positionY + 40;
            item.shopAndActivityInfo.positionY = notMovelist[index - 1].positionY + 40;
          }
          this.setPosition(item, 'no');
        });
      },
      //设置点位类型背景色
      setBgCalssName(type, operateAction) {
        switch (type) {
          case '1':
            if (operateAction == 2) {
              return 'bg-ccc';
            } else {
              return 'bg-blue';
            }
          case '2':
            return 'bg-yellow';
          case '3':
            return 'bg-purple';
          case '4':
            return 'bg-lightBlue';
          case '6':
            return 'bg-red';
          case '5':
            return 'bg-green';
          case '9':
            return 'bg-orange';
          case '8':
            return 'bg-balck';
          case '7':
            return 'bg-sgrea';
        }
      },
      //改变位置
      async setPosition(item, isTip) {
        // item.spaceType == '1'
        let res = await Build.apiSpaceUpdate({
          primaryKey: item.primaryKey,
          assetType: item.shopAndActivityInfo.spaceType,
          positionX: item.shopAndActivityInfo.positionX,
          positionY: item.shopAndActivityInfo.positionY,
        });
        if (!isTip) {
          requestTips(res, () => {});
        }
      },
      //附件上传成功
      async handleSuccess(data, floorKey, version) {
        let res = await Build.apiFloorUpload({
          fileUrl: data.data.rows[0].url,
          fileTitle: data.data.rows[0].originalName,
          fileId: data.data.rows[0].key,
          workId: this.workId,
          bizId: floorKey,
          version: version,
          spaceKey: this.$route.query.spaceKey,
        });
        requestTips(res, () => {
          this.reloadAssetsData(floorKey);
        });
      },
      //隐藏所有弹框
      hideAllDialog() {
        this.dialogObj.areaDialog = false;
        this.dialogObj.spaceDialog = false;
        this.dialogObj.shopSeparateDialog = false;
        this.dialogObj.approDialog = false;
      },
    },

    components: { zcArea, zcShopSeparate, zcSpace, zcApprove, uploadFile },
  };
</script>
<style lang="scss" scoped>
  .el-icon-warning {
    font-size: 18px !important;
  }
  .el-form {
    margin-left: -10px;
  }
  .split-box {
    width: 100%;
    height: 40px;
    margin: 10px 0;
  }

  .cut-off-line {
    width: 100%;
    height: 1px;
  }

  .building-box {
    border-bottom: 5px solid #f1f1f1;
  }
  .drawing-foem-box {
    width: 100%;
    height: 48px;
    overflow: hidden;
  }
  .drawing-box {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .left-box {
      width: 1100px;
      .cmd-pic {
        width: 100%;
        pointer-events: none;
      }
    }
    .drag-box {
      position: absolute;
    }
    .right-box {
      overflow-y: auto;
      background: #ffffff;
      // background: linear-gradient(to right, rgb(255, 255, 255), rgb(135, 138, 135), rgb(19, 18, 19));
    }
  }
  .bg-blue {
    color: rgb(9, 9, 233) !important;
  }
  .bg-yellow {
    color: rgb(228, 214, 20) !important;
  }
  .bg-red {
    color: rgb(243, 80, 4) !important;
  }
  .bg-green {
    color: rgb(94, 236, 12) !important;
  }
  .bg-orange {
    color: rgb(157, 202, 216) !important;
  }
  .bg-black {
    color: rgb(34, 34, 31) !important;
  }
  .bg-sgrea {
    color: rgb(107, 72, 31) !important;
  }
  .bg-purple {
    color: rgb(249, 0, 240) !important;
  }
  .bg-lightBlue {
    color: rgb(105, 105, 210) !important;
  }
  .bg-ccc {
    color: #cccccc !important;
  }
</style>
